<template>
  <NewCard style="position: relative" title="审核结果">
    <div class="score">
      <div class="scoreTitle">
        <h3>合同智能审核报告</h3>
        <p>Contract review report</p>
      </div>
      <div class="scoreNum">{{ auditdata&&getScore(auditdata.score) }}<span>分</span></div>
    </div>
    <div class="pointList">
      <p class="pointTitle">共审核了 <span>{{auditdata.elementsExists.concat(auditdata.elementsLack).length}}</span> 项合同要点</p>
      <ul>
        <li v-for="(item,index) in auditdata.elementsExists " :key="index">
          <p>{{item.elementKey}}
            <i :class='item.keypoint==""?"el-icon-warning":"el-icon-success"'></i></p>
           <span>{{item.keypoint}}</span>
        </li>
      </ul>
         <ul>
        <li v-for="(item,index) in auditdata.elementsLack " :key="index">
          <p>{{item.elementKey}}
            <i class="el-icon-warning"></i></p>
           <span>{{item.keypoint}}</span>
        </li>
        
      
      </ul>
    </div>
    <div class="shareBtn">
      <FloatCard v-show="isShowCard" @closeCard="clickCloce">
      <template slot="title">
        <span v-if="isEmail"
          >电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span
        >
        <span v-else>分享<b> (复制本内容的链接进行分享)</b></span>
      </template>
      <template slot="input">
        <el-input
          v-if="isEmail"
          class="input-with-select"
          v-model="to"
          placeholder="请输入对方邮箱"
        >
          <el-button slot="append" @click="affirmSend">确认</el-button>
        </el-input>
        <el-input
          v-else
          class="input-with-select"
          v-model="thisContentUrl"
          id="copyInput"
          readonly
        >
          <el-button slot="append" @click="clickCopy">复制</el-button>
        </el-input>
      </template>
    </FloatCard>
      <!-- <FloatCard v-show="isShowCard" @closeCard="clickCloce">
        <template slot="title">
          <span v-if="true"
            >电邮<b> (将本内容以PDF的形式分享至对方邮箱)</b></span
          >
          <span v-else>分享<b> (复制本内容的链接进行分享)</b></span>
        </template>
        <template slot="input">
          <el-input
            v-if="isEmail"
            class="input-with-select"
            v-model="to"
            placeholder="请输入对方邮箱"
          >
            <el-button slot="append" @click="affirmSend">确认</el-button>
          </el-input>
          <el-input
            v-else
            class="input-with-select"
            v-model="thisContentUrl"
            id="copyInput"
          >
            <el-button slot="append" @click="clickCopy">复制</el-button>
          </el-input>
        </template>
      </FloatCard> -->
      <el-button round @click="isShowCard = true">分享报告</el-button>
      <el-button
        round
        @click=" consultingclick"
        >咨询专家</el-button>
    </div>
    <div class="ribbon">
      
    </div>
  </NewCard>
</template>

<script>
import FloatCard from "@/components/Ribbon/floatCard.vue";
import NewCard from "@/wss/components/newCard.vue";
import {
  getDocMailEmailApi,
  ifPurchaseMailApi,
  getOverallDownloadPdfApi,
} from "@/BMViews/api/doc/mail.js";
import { addDocTopEmailApi } from "@/BMViews/api/doc/top.js";

export default {
  props:['auditdata'],
  name: "AuditResult",
  components: { NewCard, FloatCard },
  data() {
    return {
      isEmail: true, //当前是否是电邮
      isShowCard: false, //是否显示电邮分享
      to: "",
    };
  },
  mounted(){
    this.to=this.$store.state.user.email
    console.log();
  },
  methods: {
    //咨询跳转
     consultingclick(){
      //寻找到法务咨询的，一级ID
      let routlist=this.$router.options.routes
      routlist.forEach(item => {
        if (item.path=="/Bm-Consult") {
          item.children.forEach(element => {
            if (element.meta.title=="法务咨询") {
             this.$router.push({
              path:`/Bm-Consult/${element.meta.id}`,
              query:"123"
          })
            }
          });
        }
      });
         
    },
    //电邮分享点击关闭按钮
    clickCloce() {
      
      this.isShowCard = false;
    },
    affirmSend() {
      //发送电邮
      if (!this.to == "") {
        //发送电邮的接口
        this.getDocMailEmail();
      } else {
        this.$message("请填写邮箱地址");
      }
    },
     //发送电邮接口
    async getDocMailEmail() {
      const { to } = this;
      // 判断id超过20位截取一半
      // let arr = this.detail.id.split("");
      // let esId = "";
      // if (arr.length > 20) {
      //   esId = this.detail.id.slice(0, 16);
      // } else {
      //   esId = this.detail.id;
      // }
      let esId = this.auditdata.id;

      let esType = 20;
      let result = await getDocMailEmailApi({ to, esId, esType });
      if (result.code == 200) {
        this.$message({ message: "电邮发送成功！", type: "success" });
        //电邮数量+1
        this.addDocTopEmail();
        // 关闭电邮悬浮窗
        this.isShowCard = false;
      }
    },
    //电邮数量+1
    async addDocTopEmail() {
      let id = this.auditdata.id;
      let type = 20;
      let result = await addDocTopEmailApi(id, type);
      // console.log(result,"gggggg");
      // if (result.code == 200) {
      //   //当前选中的文章电邮数+1
      //   this.handlerEmail();
      // }
    },
    //**************************电邮*********************** end
    //点击复制
    async clickCopy() {
      let copyVal = document.getElementById("copyInput");
      // console.log(copyVal);
      copyVal.select();
      document.execCommand("Copy");
      this.$message({
        message: "复制成功",
        type: "success",
      });
      //分享点击数接口
      let result = await addDocTopShareApi(this.auditdata.id, 20);
      if (result.code == 200) {
        //当前选中的文章分享数+1
        this.handlerShare();
      }
    },
  },
  
computed:{
  getScore(){
    return (val)=>{
     if (typeof val =="string") {
       return val.substring(0,)
     } else {
      return val.toFixed()

     }

    }
  }

}
};
</script>

<style scoped>
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 审核得分 */
.score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f4ff;
  border-radius: 10px;
  padding: 20px;
  margin-top: 15px;
}
.score .scoreTitle h3 {
  margin: 0;
  color: #39486f;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.score .scoreTitle p {
  color: #ccd0db;
  font-size: 16px;
}
.score .scoreNum {
  background-color: #fff;
  color: #39486f;
  font-weight: bold;
  font-size: 32px;
  padding: 12px 32px;
  border-radius: 32px;
}
.score .scoreNum > span {
  font-size: 12px;
  padding-left: 8px;
  font-weight: 400;
  color: #8b98b9;
}
/* 审核列表 */
.pointList {
  margin-top: 25px;
  margin-bottom: 100px;
}
.pointList .pointTitle {
  font-size: 14px;
  color: #999;
  margin-bottom: 12px;
}
.pointList .pointTitle > span {
  color: #f87a23;
}
.pointList ul > li {
  padding: 15px 20px;
  border-radius: 12px;
  border: 1px solid #efefef;
  margin-bottom: 14px;
}
.pointList ul > li > p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.pointList ul > li > span {
  display: block;
  font-size: 14px;
  line-height: 24px;
  color: #999;
}

.pointList .el-icon-success {
  color: #4fb256;
}
.pointList .el-icon-warning {
  color: #f87a23;
}

/* 底部按钮 */
.shareBtn {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px 0;
  background-color: #fff;
  border-top: 1px solid #efefef;
  text-align: center;
}
.shareBtn .el-button {
  border: 1px solid #f87a23;
  color: #f87a23;
  padding: 10px 70px;
  font-weight: bold;
}
.shareBtn .el-button:last-child {
  background-color: #f87a23;
  color: #fff;
}
.shareBtn .el-button:hover {
  background-color: #fff;
}
.shareBtn .el-button:last-child:hover {
  background-color: #f87a23;
  opacity: 0.9;
}
.box-card {
  position: absolute;
  width: 95%;
  left: 2.5%;
  top: calc(-100% - 60px);
  z-index: 999;
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 2px 4px 16px 2px rgba(201, 201, 201, 0.5);
}
.box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.box-head i {
  cursor: pointer;
}
.box-head >>> b {
  color: #999;
  font-size: 14px;
  font-weight: 400;
}

::v-deep .el-input input {
  height: 41px;
  line-height: 41px;
  border-radius: 25px 0 0 25px;
  border-right: 0;
}
::v-deep .el-input input:focus-within {
  border-color: #dcdfe6;
}
::v-deep .el-input-group__append {
  width: 74px;
  border-left: 0;
  background-color: transparent;
  border-radius: 0 25px 25px 0;
}
::v-deep .el-input-group__append > button {
  background-color: #f87a23;
  border-radius: 20px;
  color: #fff;
}

/* ============== */
.ribbon {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 54px;
  position: relative;
}
.ribbon > ul {
  display: flex;
  padding: 0;
}
.ribbon > ul li {
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  color: #999;
  margin-right: 30px;
  font-size: 12px;
}
.ribbon > ul li > svg {
  display: block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  font-size: 14px;
  color: #b7b7b7;
}
.ribbon > ul li.isActive,
.ribbon > ul li.islight,
.ribbon > ul li.isActive svg,
.ribbon > ul li.islight svg {
  color: #f87a23;
}

.ribbon .ribbon_btn .el-button {
  color: #f87a23;
  border-color: #f87a23;
  font-size: 12px;
}
.ribbon .ribbon_btn .ribbon_down {
  color: #fff;
  background-color: #f87a23;
  margin-left: 10px;
}
.ribbon .ribbon_btn .el-button:hover {
  background-color: #f89723;
  color: #fff;
}
</style>